<script setup lang="ts">
import { computed } from "vue";
import { useGroupUserStore } from "../store/groupUser";
import FriendsItem from "../components/friendsItem.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const { roomId, roomName } = router.currentRoute.value.query;

const groupUserStore = useGroupUserStore();

const userList = computed(
  (): IGroupUser[] | undefined => groupUserStore.groupUserlist
);
</script>

<template>
  <div class="groupDetail">
    <VanNavBar
      title="群聊用户"
      left-text="返回"
      left-arrow
      @click-left="
        $router.push({
          name: 'chatsDetail',
          params: { roomId: roomId + '', roomName: roomName + '', type: 1 },
        })
      "
    />
    <div class="groupDetail__list">
      <FriendsItem
        v-for="item in userList"
        :data="{ name: item.user.username, id: item.user.id }"
      />
    </div>
  </div>
</template>
